// 这里只是说明了@reduxjs/toolkit如何使用,此时与react无关
// 创建slice. 因为创建store对象,需要slice
import { createSlice, configureStore, createAsyncThunk } from '@reduxjs/toolkit'

// 执行异步
// countAsync的作用:
// 1. countAsync 是一个异步actionCreator
// 2. countAsync 可以监听异步操作的promise状态
export const countAsync = createAsyncThunk('yyy', () => {
  // 这个回调中要求必须返回一个promise
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(5)
      // reject(3)
    }, 2000)
  })
})

const countSlice = createSlice({
  name: 'xxx', // slice的名称. 未来在action对象中可以看到
  initialState: { count: 0, msg: '嘿嘿嘿', isShow: false }, //初始化数据
  // 这个配置项,既可以生成reducer函数,也可以生成actionCreator
  reducers: {
    // 这个函数名,即使reducer中的case. 也是actionCreator的名字
    add(state, action) {
      // 注意: 这个state其实不是真正的redux的state数据,是真正的state数据的代理.这个代理可以直接被修改. 然后代理修改后的数据,去修改redux的数据
      console.log(state, action)
      state.count = state.count + action.payload
    },
  },
  // 给异步操作定义case
  extraReducers(builder) {
    builder.addCase(countAsync.pending, (state, action) => {
      console.log('pending', state, action)
      //pending的时候,要让提示展示
      state.isShow = true
    })
    builder.addCase(countAsync.fulfilled, (state, action) => {
      console.log('fulfilled', state, action)
      state.count = state.count + action.payload
      state.isShow = false
    })
    builder.addCase(countAsync.rejected, (state, action) => {
      console.log('rejected', state, action)
      state.isShow = false
    })
  },
})

// 创建store对象
const store = configureStore({
  // 相当于合并reducer
  reducer: {
    count: countSlice.reducer,
  },
})
// // 解构actionCreator
// const { add } = countSlice.actions
// console.log(add(1))
// console.log(store.getState())
// store.dispatch(add(1))
// console.log(store.getState())

export default store
export const { add } = countSlice.actions
